<template>
  <div>
    <h2>房型添加</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><span style="color: red">*</span>房间名称</td>
          <td>
            <input type="text" v-model="form.fname">
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>门市价</td>
          <td> <input type="text" v-model="form.price"></td>
        </tr>
        <tr>
          <td>押金</td>
          <td>
            <input type="radio" v-model="form.yajin" name="ya" checked>不需要
            <input type="radio" v-model="form.yajin" name="ya">需要
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>人数</td>
          <td>
            <input type="text" v-model="form.renshu">
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>介绍</td>
          <td>
            <textarea v-model="form.jieshao"></textarea>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { Extension } from "typescript";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const form = reactive({
  id: 0,
  name: "",
  pwd: "",
  fname: "",
  price: "",
  yajin: "",
  renshu: "",
  tupian: "",
  jieshao: "",
});
const Add=()=>{
    if(!form.fname){
        alert("房型名称不能为空");
        return;
    }
    if(!form.price){
        alert("价格不能为空");
        return;
    }
    if(!form.renshu){
        alert("人数不能为空");
        return;
    }
    if(!form.tupian){
        alert("图片还未上传");
        return;
    }
    if(!form.jieshao){
        alert("介绍不能为空");
        return;
    }
    axios.post("https://localhost:7074/api/fangxing/Addfang",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("showxing");
        }
        else{
          alert("添加成功");
            router.push("showxing");
        }
    })
}

const Tupian=(e:any)=>{
    var formData=new FormData();
    var file=e.target.files[0];
    formData.append("file",file);
    axios.post("https://localhost:7074/api/fangxing/Pic",formData).then(res=>{
        form.tupian=res.data;
    }).catch(err=>{
        
    })
}
</script>

<style scoped></style>
